<template>
	<div style="background: #f7f7f7;height:auto">
		<!-- 头部 -->
		<div class="vipall">
			<div class="viptitle">
				<div class="viptitleleft">
					<div class="titlepic">
					  <img :src="avatar" alt="">
					</div>
					<p>{{nickname}}</p>
				</div>
				<div v-if="vipstatus==2||vipstatus=='2'">
					<div class="titletime" v-if="vip_level==2||vip_level=='2'">普通VIP<p>会员将在{{end_time}}日到期</p></div>
					<div class="titletime" v-else>您还不是该科目会员</div>
				</div>
				<div v-else>
					<div class="titletime" v-if="vip_level==2||vip_level=='2'">超级VIP</div>
					<div class="titletime" v-else>您还不是该项目会员</div>
				</div>
			</div>
		</div> 
		<!-- VIP -->
		<!-- 单科题库会员 -->
		<div class="vipself" v-if="vipstatus==2||vipstatus=='2'">
			<img src="../../../../src/assets/img/qikeyVip/tkvipself.png" alt="">
		</div>
		<div v-else>
			<div class="vipself">
				<img src="../../../../src/assets/img/qikeyVip/saiszbo.png" alt="">
			</div>
		</div>
		
		<!-- 题库 -->
		<div class="viptk" v-if="vipstatus==2||vipstatus=='2'">
			<!-- 白金VIP -->
			<div class="vipdetail">
				<div class="vipback">
					<img v-if='subject==1||subject=="1"' src="../../../../src/assets/img/qikeyVip/vipbackground1.png" alt="">
					<img v-else-if='subject==2||subject=="2"' src="../../../../src/assets/img/qikeyVip/vipbackground2.png" alt="">
					<img v-else-if='subject==3||subject=="3"' src="../../../../src/assets/img/qikeyVip/vipbackground3.png" alt="">
					<img v-else-if='subject==4||subject=="4"' src="../../../../src/assets/img/qikeyVip/vipbackground4.png" alt="">
					<img v-else-if='subject==5||subject=="5"' src="../../../../src/assets/img/qikeyVip/vipbackground5.png" alt="">
					<img v-else-if='subject==6||subject=="6"' src="../../../../src/assets/img/qikeyVip/vipbackground6.png" alt="">
					<img v-else-if='subject==7||subject=="7"' src="../../../../src/assets/img/qikeyVip/vipbackground7.png" alt="">
					<img v-else-if='subject==8||subject=="8"' src="../../../../src/assets/img/qikeyVip/vipbackground8.png" alt="">
				</div>
				
				<div class="topchoose">
					<p>VIP会员<span> ({{subjectclass}})</span></p>
				</div>
				<div  v-if='(is_type==3||is_type=="3")||(is_type==4||is_type=="4")||(is_type==2||is_type=="2")' class="viptype activebut">
					已开通
				</div>
				<!-- <div v-if='is_type==2||is_type=="2"' class="viptype activebut">
					已开通
				</div> -->
				<div class="bottomchoose a" id='' v-else  @click="buytikuall(vipdata1,1)">
					<div class="vipprice">
						<span class="pricefu">¥</span>
						<span class="pricenow" v-if='type==2||type=="2"'>{{vipdata1.ios_price}}</span>
						<span class="pricenow" v-else>{{vipdata1.price}}</span>
						<!-- <span class="pricenow">9.9</span> -->
						<span class="pricefu">/年</span>
						<span class="pricetime">立即开通</span>
					</div>
				</div>
				
			</div>
			
		</div>
		
		<!-- 赛思直播 -->
		<div class="zbovip" v-else>
			<div class="zboback">
				<div class="vipbackzbo">
					<img src="../../../../src/assets/img/qikeyVip/qikeyback.png" alt="">
				</div>
				<div  v-if='vip_level==2||vip_level=="2"||is_type==2||is_type=="2"' class="viptype activebut">
					您已开通赛思直播超级会员
				</div>
				<div class="vipbutzbo" v-else  @click="buytikuall(vipdata1,2)">
					<div class="vipprice">
						<!-- <s>¥999</s> -->
						<span class="pricefu">¥</span>
						<span class="pricenow">{{vipdata1.ios_price}}</span>
						<span class="pricefu">/年</span>
						<span class="pricetime">立即开通</span>
					</div>
				</div>
			</div>
		</div>
		
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				showtk:1,
				vipstatus:1,   //2单独题库vip  全部vip
				subject:4,
				subjectclass:'前去补充专业',
				type:'',    //1安卓端   2ios端  3H5端
				is_type:'',  //0体验用户 1普通用户 2当前科目下vip 3白金vip 4超级vip
				end_time:'',   //会员到期时间   注：超级Vip，白金vip是永久有效的
				url:this.$store.state.url,//接收路由过来的图片地址前缀
				vipdata:{},
				vipdata1:{},
				nickname:'',
				avatar:'',
				datasubject:[],
				priceioscr:'',
				iosversion:'',
				deviceID:'',
				token:'',
				vip_level:'',
			};
		},
		methods:{
			// 点击小七直播
			qkyvipclick(){
				this.showtk=0
			},
			// 点击题库
			tkvipclick(){
				this.showtk=1
			},
			buytype(){
				var that = this;
				var token = that.token;
				var type = that.type;
				if(type==2||type=='2'){
					if(token !=''){
						that.ptVip();
						that.getuserInfo();
					}else{
						that.iosqikeya();
					}
				}else{
					that.ptVip();
				}
			},
			// 购买题库全部会员
			buytikuall(vipdata,iostype){
				// product_id
				var that = this;
				var type = that.type;
				
				if(type==1||type=='1'){  //Android
				  // that.subjectVipOrder(id,subject);
				  var data = {
					  id:vipdata.id,
					  subject:vipdata.subject,
					  price:vipdata.price
				  }
				  // console.log(JSON.stringify(data));
				  window.android.Android_BuyVip('tobuy',JSON.stringify(data));
				}else if(type==2||type=='2'){    //ios
				    if(iostype==2||iostype=='2'){   //小七会员
						var params = {
						  id:vipdata.id,
						  subject:vipdata.subject,
						  price:vipdata.ios_price,
						  product_id:vipdata.product_id,
						  type:2
						}
					}else{
						var params = {
						  id:vipdata.id,
						  subject:vipdata.subject,
						  price:vipdata.ios_price,
						  product_id:vipdata.product_id,
						  type:1
						}
					}
					
					// console.log(params);
					that.$bridge.callhandler('buyVIP',JSON.stringify(params),(data) => {
						// 处理返回数据
// 						layer.open({
// 							content:'调用成功',
// 							skin: 'msg',
// 							time: 2 //1秒后自动关闭
// 						});
					})
					

				}
			},
			
			// 普通vip列表价格
			ptVip(){
				var that = this;
				that.axios({
					method:'GET',
					url:that.url+'MyTk/ptVip',
					params:{
						subject:that.subject,
					},
				}).then((res)=>{
					if(res.data.errcode==0||res.data.errcode=='0'){
						var data = res.data.data;
						// that.vip_level=data[0].is_type;  //0体验用户 1普通用户 2当前科目下vip 3白金vip 4超级vip
						// that.is_type=data[0].is_type;  //0体验用户 1普通用户 2当前科目下vip 3白金vip 4超级vip
						// that.end_time=data[0].end_time;   //会员到期时间   注：超级Vip，白金vip是永久有效的
						that.vipdata = data[0];
						for(var i=0;i<data.length;i++){
							if(that.subject==data[i].subject){
							  that.vipdata1=data[i];
							  that.vip_level=data[i].is_type;  //0体验用户 1普通用户 2当前科目下vip 3白金vip 4超级vip
							  that.is_type=data[i].is_type;  //0体验用户 1普通用户 2当前科目下vip 3白金vip 4超级vip
							  that.end_time=data[i].end_time;   //会员到期时间   注：超级Vip，白金vip是永久有效的
							}
						}
					}else{
						layer.open({
							content: res.data.msg,
							skin: 'msg',
							time: 2 //1秒后自动关闭
						});
					}
				})
			},
			choosesubject(){
				var that = this;
				that.axios({
					url:that.$store.state.url + "MyTk/getSubject",
				}).then(res=>{
					// console.log(res);
					// this.chenload=true;
					if(res.data.errcode==0||res.data.data.errcode=='0'){
						var data =res.data.data; 
						var datafirst = [{id:0,name:'前去补充专业'}]
						var data1 = datafirst.concat(data);
						// console.log(that.slots1);
						that.datasubject = data1;
						// console.log(that.slots1)
						
						var datasubject = that.datasubject;
						for(var i=0;i<datasubject.length;i++){
							if(that.subject==datasubject[i].id){
								that.subjectclass=datasubject[i].name;
							}
						}
					}
				})
			},
			// 获取个人信息
			getuserInfo:function(){
				var that = this;
				// var thatstate = that.$store.state;
				that.axios.defaults.headers.common['release'] = that.iosversion;
				// 获取个人信息
				that.axios({
					method:'GET',
					url:that.url+'User/getUserInfo',
				})
				.then((res)=>{
					// console.log(res);
					if(res.data.errcode == 0 || res.data.errcode == '0'){
						var getuser = res.data.data;
						if(getuser.nickname!=''){
							that.nickname = getuser.nickname;
							that.avatar = getuser.avatar;
						}else{
							if(getuser.nickname1==''){
								that.nickname = getuser.tel;
								that.avatar = that.$store.state.avatarimg;
							}else{
								that.nickname = getuser.nickname1;
								that.avatar = getuser.avatar1;
							}
						}
						// console.log(that.nickname)
						that.vip_level=getuser.vip_level;  //0体验用户 1普通用户 2当前科目下vip 3白金vip 4超级vip
						
						
					}else{
						that.nickname = '';
						that.avatar = that.$store.state.avatarimg;
					}
				}).catch((err)=>{
				   console.log(err)
				})
			},
			// ios游客登录时小七会员价格
			iosqikeya(){
				var that = this;
				// console.log(that.iosversion)
				// console.log(that.deviceID)
				that.axios.defaults.headers.common['deviceid'] = that.deviceID;
				that.axios.defaults.headers.common['release'] = that.iosversion;
				that.axios.defaults.headers.common['fromsource'] = 4;
				that.axios.defaults.headers.common['device'] = 'iOS';
				that.axios({
					method:'GET',
					url:that.url+'guest/createGuest',
				}).then((res)=>{
					if(res.data.errcode==0||res.data.errcode=='0'){
						var data = res.data.data;
						that.vip_level = data.vip_level;
						that.vipend_time = data.xqvip_end_time;
						that.priceioscr = data.money;
					}else{
					}
				})
			},
		},
		mounted() {
			$('title').html('会员介绍');
			window.buytype = this.buytype;
			// window.buytype();
 			// subject    -1没有选择专业  1助理  2执业  3中级
 			// vipstatus  2单独题库vip   1全部vip
 			// type  1安卓端   2ios端  3H5端
			// console.log(8989)
			var that = this;
			if(that.$route.query.subject){
				var subject = that.$route.query.subject;
				that.subject=subject;
			}
			
			if(that.$route.query.vipstatus){
			   that.vipstatus=that.$route.query.vipstatus;   //2单独题库vip  全部vip
			}
			
			if(that.$route.query.type){
				var type = that.$route.query.type
			    that.type=type;   //1安卓端   2ios端  3H5端
			    if(type==2||type=='2'){
					if(that.$route.query.iosversion){
						var iosversion = that.$route.query.iosversion;
						that.iosversion = iosversion;
						// 判断是否在审核中
					}else{
						var iosversion = '';
					}
					if(that.$route.query.deviceID){
						var deviceID = that.$route.query.deviceID;
						that.deviceID = deviceID;
					}
					that.$bridge.registerhandler('buytype', (data, responseCallback) => {
					  that.buytype();
					})
					
				}
			}
			
			if (that.$route.query.token) {
				var token = that.$route.query.token;
				that.axios.defaults.headers.common['token'] = token;
				that.token = token;
				if(token==''){
					that.nickname = '';
					that.avatar = that.$store.state.avatarimg;
					if(that.type==2||that.type=='2'){
						that.iosqikeya();
					}
				}else{
					that.getuserInfo();
				}
				
			}else{
				that.token = '';
				that.nickname = '';
				that.avatar = that.$store.state.avatarimg;
				if(that.type==2||that.type=='2'){
					that.iosqikeya();
				}
			}
			
			that.ptVip();
			that.choosesubject();
			
			
			
		}
	}
</script>

<style scoped="scoped">
.viptk,.zbovip{
	padding-bottom: .66rem;
}
.viptitle{
	width: 6.9rem;
	height: 1.39rem;
	/* line-height: 1.39rem; */
	margin: .3rem auto 0;
	background: url('../../../../src/assets/img/qikeyVip/titlevip.png') no-repeat;
	background-size:100% 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 .25rem;
}
.viptitleleft{
	display: flex;
	justify-content: flex-start;
	width: 50%;
}
.titlepic{
	width: .8rem;
	height: .8rem;
	border: 0.06rem solid #A5D4FE;
	border-radius: 50%;
	margin-top: .24rem;
	overflow: hidden;
}
.titlepic img{
	width: 100%;
	height: 100%;
}
.viptitleleft P{
	width: 60%;
	margin-left: .24rem;
	line-height: 1.39rem;
	font-size: .32rem;
	font-weight: 600;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.titletime{
	font-size: .24rem;
	color: #fff;
	text-align: right;
}
.vipself{
	width: 7.5rem;
	height: 1.1rem;
	margin-top: .3rem;
}
.vipself img{
	width: 100%;
	height: 100%;
}
/* .VIP */
.viptop{
	width: 7.5rem;
	height: 1.09rem;
	background: url('../../../../src/assets/img/qikeyVip/viptk.png') no-repeat;
	background-size:100% 100%;
	position: relative;
	margin-top: .3rem;
}
.viptop div,.viptop1 div{
	position: absolute;
}
.tkvip{
	width: 2.22rem;
	height: 0.78rem;
	left: .85rem;
	top: .26rem;
}
.tkvip img,.tkvip1 img{
	width: 100%;
	height: 100%;
}
.qkyvip{
	width: 1.95rem;
	height: .38rem;
	top: .48rem;
	right: .8rem;
}

.qkyvip img,.qkyvip1 img{
	width: 100%;
	height: 100%;
}
.viptop1{
	width: 7.5rem;
	height: 1.16rem;
	background: url('../../../../src/assets/img/qikeyVip/vipqkey.png') no-repeat;
	background-size:100% 100%;
	position: relative;
	margin-top: .3rem;
}
.tkvip1{
	width: 1.3rem;
	height: 0.38rem;
	left: 1.06rem;
	top: .48rem;
}
.qkyvip1{
	width: 2.21rem;
	height: .78rem;
	top: .26rem;
	right: .84rem;
}
.vipdetail{
	width: 7.5rem;
	height:9.2rem;
	background: url('../../../../src/assets/img/qikeyVip/vipback1.png') no-repeat;
	background-size:100% 100%;
	position: relative;
	margin-top: -0.02rem;
}
.zboback{
	width: 7.5rem;
	height:10.77rem;
	background: url('../../../../src/assets/img/qikeyVip/vipback.png') no-repeat;
	background-size:100% 100%;
	position: relative;
	margin-top: -0.02rem;
}
.zboback .viptype.activebut{
	bottom: 1.13rem !important;
}
.vipback{
	position: absolute;
	top: .13rem;
	width: 7.08rem;
	height: 8.82rem;
	left: 50%;
	margin-left: -3.54rem;
}
.vipback img{
	width: 100%;
	height: 100%;
}
.viptype{
	width: 5.3rem;
	height: .76rem;
	text-align: center;
	background: #DDDDDD;
	color: #fff;
	font-size: .24rem;
	line-height: .76rem;
	position: absolute;
	left: 50%;
	bottom: .7rem;
	margin-left: -2.65rem;
	border-radius: .28rem;
}
.viptype.activebut{
	bottom: .45rem;
}
.vipbuyall{
	position: absolute;
	width: 5.44rem;
	height: .9rem;
	left: 50%;
	bottom: .7rem;
	margin-left: -2.72rem;
	background: url('../../../../src/assets/img/qikeyVip/vipbut.png') no-repeat;
	background-size:100% 100%;
}
.vipbuyall s{
	color: #C6DBFC;
	display: inline-block;
}
.vipprice{
	color: #fff;
	font-weight: 600;
	text-align: center;
	/* padding-left: 1.19rem; */
	line-height: .9rem;
}
.vipprice .pricefu{
	font-size: .2rem;
}
.pricenow{
	font-size: .34rem;
}
.pricetime{
	font-size: .24rem;
	margin-left: .2rem;
}
.vipbottom{
	width: 7.5rem;
	height: 9.17rem;
	background: url('../../../../src/assets/img/qikeyVip/tkbottomback.png') no-repeat;
	background-size:100% 100%;
	/* margin-top: 0.05rem; */
	position: relative;
}	
.topchoose{
	position: absolute;
	top: .52rem;
	background: url('../../../../src/assets/img/qikeyVip/viptap.png') no-repeat;
	background-size:100% 100%;
	width: 5.42rem;
	height: .77rem;
	line-height: .77rem;
	left: 50%;
	margin-left: -2.71rem;
}
.topchoose p{
	text-align: center;
	color: #6865FA;
	font-size: .28rem;
	font-weight: 600;
}
.topchoose p span{
	font-size: .24rem !important;
	color: #FD5D4C !important;
	font-weight: 500 !important;
}
.bottomchoose{
	position: absolute;
	bottom: .45rem;
	background: url('../../../../src/assets/img/qikeyVip/vipbut.png') no-repeat;
	background-size:100% 100%;
	width: 5.44rem;
	height: .9rem;
	line-height: .9rem;
	left: 50%;
	margin-left: -2.72rem;
}
.vipbackzbo{
	position: absolute;
	width: 7.08rem;
	height: 9.99rem;
	left: 50%;
	margin-left: -3.54rem;
}
.vipbackzbo img{
	width: 100%;
	height: 100%;
}
.vipbutzbo{
	position: absolute;
	bottom: 1.13rem;
	background: url('../../../../src/assets/img/qikeyVip/vipbut.png') no-repeat;
	background-size:100% 100%;
	width: 5.44rem;
	height: .9rem;
	line-height: .9rem;
	left: 50%;
	margin-left: -2.72rem;
}
</style>
